<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<script>
    function flushCode() {
        // 每次刷新的时候获取当前时间，防止浏览器缓存刷新失败
        var time = new Date();
        document.getElementById("kaptcha").src = "/kaptcha?time=" + time;
    }
</script>
<body>
<h1>图片验证码登录</h1>
<form  method="post" >
    <span>用户名</span><input type="text" name="username" id="username"/> <br>
    <span>密码</span><input type="password" name="password" id="password"/> <br>
    <span>验证码</span><input type="text" name="captchaCode" id="captchaCode"/> <br>
    <img alt="验证码" id="kaptcha" name="kaptcha" src="/kaptcha" >
    <a href="#" onclick="flushCode();">看不清?</a></br>
    <label><input type="checkbox" id="remeber-me">记住我</label>
    <input type="button" onclick="login()" value="登陆">
</form>
<script type="text/javascript">
        function login() {
            var name=$("#username").val();
            var password=$("#password").val();
            var kaptcha=$("#captchaCode").val();
            var remeberme=$("#remeber-me").is(":checked");
            if (name===""||password===""){
                alert("用户密码不能为空");
                return;
            }
            $.ajax({
                type: "POST",
                url: "/login",
                data:{
                    "uname": name,
                    "upassword": password,
                    "kaptcha":kaptcha,
                    "remeber-me":remeberme
                },
                success: function (json) {
                        if (json.success){
                            alert("登陆成功")
                        }else {
                            alert(json.msg);
                            location.href='/login.html';
                        }
                },
                error:function () {

                }
            });
        }
</script>
<h1>短信登录</h1>
<form  method="post" action="/smslogin">
    <span>电话号码</span><input type="text" name="mobile" id="mobile"/> <br>
    <span>验证码</span><input type="text" name="smsCode" id="smsCode"/>
    <input type="button" onclick="getSmsCode()" value="获取"></br>
    <input type="button" onclick="smslogin()" value="登陆">
</form>
<script type="text/javascript">
    function smslogin() {
        var smsCode=$("#smsCode").val();
        var mobile=$("#mobile").val();
        $.ajax({
            type: "POST",
            url: "/smslogin",
            data:{
                "smsCode": smsCode,
                "mobile":mobile
            },
            success: function (json) {
                if (json.success){
                    alert(json.msg);
                    location.href=''
                }else {
                    alert(json.msg);
                    location.href='/login.html';
                }
            },
            error:function () {

            }
        });
    }
    function getSmsCode() {
        var mobile=$("#mobile").val();
        $.ajax({
            type: "get",
            url: "/smsCode",
            data:{
                "mobile": mobile
            },
            success: function (json) {
                alert(json.msg);
            },
            error: function (json) {
                alert(json.msg);
            }
        });
    }
</script>
</body>
</html>